<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>来料检验</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 搜索栏-->
  <el-row style="margin: 10px;background-color: ghostwhite;padding: 15px">
    <el-col :span="24">
      <el-form :model="incomingQuery" inline>
        <el-form-item label="检验单编号">
          <el-input v-model="incomingQuery.incomingId"/>
        </el-form-item>
        <el-form-item label="供应商编码">
          <el-input v-model="incomingQuery.vendorId"/>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="incomingQuery.vendorName"/>
        </el-form-item>
        <el-form-item label="供应商批次号">
          <el-input v-model="incomingQuery.vendorNumber"/>
        </el-form-item>
        <el-form-item label="产品物料编码">
          <el-input v-model="incomingQuery.materialNumber"/>
        </el-form-item>
        <el-form-item label="产品物料名称">
          <el-input v-model="incomingQuery.materialName"/>
        </el-form-item>
        <el-form-item label="检测结果">
          <el-input v-model="incomingQuery.incomingResult"/>
        </el-form-item>
        <el-form-item label="来料日期">
          <el-date-picker
              v-model="incomingQuery.createTime"
              type="datetime"
              placeholder="Pick a Date"
              format="YYYY/MM/DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="检测日期">
          <el-date-picker
              v-model="incomingQuery.testTime"
              type="datetime"
              placeholder="Pick a Date"
              format="YYYY/MM/DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="检测人员">
          <el-input v-model="incomingQuery.Inspectors"/>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadIncomings" type="primary"><el-icon><Search /></el-icon>搜索</el-button>
          <el-button @click="refresh" type="primary"plain><el-icon><Refresh /></el-icon>重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 工具栏 -->
  <el-row style="margin: 0px 10px;background-color: ghostwhite;padding: 0px 10px">
    <el-col :span="24">
      <el-button-group>
        <el-button @click="showAddIncomingWin" type="primary"><el-icon><Plus /></el-icon>新增</el-button>
        <el-button @click="toEdits" type="primary"><el-icon><Edit/></el-icon>编辑</el-button>
        <el-button @click="toExport" type="primary"><el-icon><Upload/></el-icon>导出</el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="incomings" border stripe ref="incomingTable">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="incomingId" label="来料检验单编号"/>
        <el-table-column prop="incomingName" label="来料检验单名称"/>
        <el-table-column prop="vendorName" label="供应商名称"/>
        <el-table-column prop="vendorNumber" label="供应商批次号"/>
        <el-table-column prop="materialNumber" label="产品物料编码"/>
        <el-table-column prop="materialName" label="产品物料名称"/>
        <el-table-column prop="receptionNumber" label="接收数量"/>
        <el-table-column prop="testNumber" label="检测数量"/>
        <el-table-column prop="unqualifiedNumber" label="不合格数"/>
        <el-table-column prop="incomingResult" label="检测结果"/>
        <el-table-column prop="createTime" label="来料日期"/>
        <el-table-column prop="testTime" label="检测日期"/>
        <el-table-column prop="Inspectors" label="检测人员"/>
        <el-table-column prop="incomingStatus" label="单据状态">
          <template #default="scope">
            <el-tag type="primary" v-if="scope.row.incomingStatus == 1">草稿</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="330">
          <template #default="scope">
            <el-button-group>
              <el-button @click="toEdit(scope.row.incomingId)" size="small" type="primary">修改</el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!--  分页栏 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-pagination @change="changePage" background layout="prev, pager, next" :total="total"/>
    </el-col>
  </el-row>
  <!-- 新增项目的弹窗 -->
  <el-dialog v-model="incomingAddWinDialogVisible"
             title="添加常见缺陷"
             width="50%"
  >
    <template #default>
      <el-form :model="newIncoming" label-width="auto">
        <el-form-item label="来料检验单名称">
          <el-input v-model="newIncoming.incomingName"/>
        </el-form-item>
        <el-form-item label="供应商编码">
          <el-input v-model="newIncoming.vendorId"/>
        </el-form-item>
        <el-form-item label="供应商名称">
          <el-input v-model="newIncoming.vendorName"/>
        </el-form-item>
        <el-form-item label="供应商批次号">
          <el-input v-model="newIncoming.vendorNumber"/>
        </el-form-item>
        <el-form-item label="产品物料编码">
          <el-input v-model="newIncoming.materialNumber"/>
        </el-form-item>
        <el-form-item label="产品物料名称">
          <el-input v-model="newIncoming.materialName"/>
        </el-form-item>
        <el-form-item label="接收数量">
          <el-input v-model="newIncoming.receptionNumber"/>
        </el-form-item>
        <el-form-item label="检测数量">
          <el-input v-model="newIncoming.testNumber"/>
        </el-form-item>
        <el-form-item label="不合格数">
          <el-input v-model="newIncoming.unqualifiedNumber"/>
        </el-form-item>
        <el-form-item label="检测结果">
          <el-input v-model="newIncoming.incomingResult"/>
        </el-form-item>
        <el-form-item label="来料日期">
          <el-date-picker
              v-model="incomingQuery.createTime"
              type="datetime"
              placeholder="Pick a Date"
              format="YYYY/MM/DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="检测日期">
          <el-date-picker
              v-model="incomingQuery.testTime"
              type="datetime"
              placeholder="Pick a Date"
              format="YYYY/MM/DD HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="检测人员">
          <el-input v-model="newIncoming.Inspectors"/>
        </el-form-item>
        <el-form-item label="单据状态">
          <el-input v-model="newIncoming.incomingStatus"/>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="addIncomingSubmit">确定</el-button>
        <el-button @click="cancelAddIncoming">取消</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 编辑子组件 -->
  <incomingEdit :incoming-id="editIncomingId" @cancel-edit="cancelEdit" @editComplete="loadIncomings()"/>


</template>
<script setup>
import {ArrowRight} from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import IncomingRequest from "@/api/incoming.js";
import {ElMessage} from "element-plus";
import incomingEdit from "@/views/qc/incoming/incoming-edit.vue";

let incomingQuery = ref({});
let curPage = ref(1);
// 总条数，默认0
let total = ref(0);
// 查询的项目列表
let incomings = ref([]);
let incomingAddWinDialogVisible = ref(false);
let incomingTable = ref(null);
// 保存新增项的表单的数据
let newIncoming = ref({});
// 编辑
let editIncomingId = ref(-1);
let createTime = ref([]);
let testTime = ref([]);
let exportIncoming = ref({});


function refresh(){
  incomingQuery.value = {};
  loadIncomings();
}



//导出
function toExport(){
  IncomingRequest.export(exportIncoming.value,curPage.value,10,res=>{
    console.log(exportIncoming.value);
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"导出成功"
      });
    }else {
      ElMessage({
        type:"warning",
        message:"导出失败"
      });
    }
  })
}





//加载项目列表
function loadIncomings() {
  // 调用API来查询项目列表
  IncomingRequest.loadIncoming(incomingQuery.value, curPage.value, 10, res => {
    // 这里的res就是后端返回的结果
    // 总条数赋值
    total.value = res.data.total;
    console.log(total.value)
    // 将查询的列表赋值给defects
    incomings.value = res.data.list;
  })
}

//新增事件
function showAddIncomingWin() {
  incomingAddWinDialogVisible.value = true;
}
//新增项目的提交按钮事件
function addIncomingSubmit() {
  IncomingRequest.saveIncoming(newIncoming.value, res => {
    if (res.code == 200) {
      ElMessage({
        type: "success",
        message: "添加成功"
      });
      cancelAddIncoming();
    } else if (res.code == 300) {
      ElMessage({
        type: "warning",
        message: "编号重复"
      });
    } else {
      ElMessage({
        type: "warning",
        message: "添加失败"
      });
    }
  })
}
// 取消新增项目的按钮事件
function cancelAddIncoming() {
  // 将newProject置空
  newIncoming = ref({});
  // 关闭弹窗
  incomingAddWinDialogVisible.value = false;
}


/**
 * 工具栏编辑按钮事件
 */
function toEdits(){
  let selectedRows = incomingTable.value.getSelectionRows();
  if(selectedRows.length > 1){
    ElMessage({
      type:"warning",
      message:"编辑只能编辑一条数据"
    });
  }else if (selectedRows.length == 0){
    ElMessage({
      type:"warning",
      message:"你没有选中任何数据"
    });
  }else{
    toEdit(selectedRows[0].incomingId);
  }
}

function cancelEdit(){
  editIncomingId.value = -1;
}
/**
 * 行编辑按钮事件
 * @param incomingId
 */
function toEdit(incomingId) {
  editIncomingId.value = incomingId;
}
/**
 * 编辑完成的事件
 */
function editCompletesSSS(){
  // 更新数据表
  cancelEdit();
}




// 分页事件
function changePage(value) {
  curPage.value = value;
  loadIncomings();
}

onMounted(() => {
  loadIncomings();
  changePage();
});

</script>